@import '../variable/setting.scss';
@import '../variable/mixins.scss';

.ly-box { box-sizing: border-box; }
.ly-top-ib { @include css_ibt; }
.ly-cen-ib { @include css_ibm; }
.ly-ver-cen { @extend .ly-top-ib; height: 100%; }
.ly-fl { float: left; }
.ly-fr { float: right; }
.ly-wh100 { width: 100%; height: 100%; }
.ly-wh100-b { @extend .ly-wh100; display: block; }
.ly-flex1 { flex: 1; }
.ly-flexc { display: flex; align-items: center; justify-content: center; }
.ly-flexc-y { display: flex; align-items: center; }
.ly-flexc-x { display: flex; justify-content: center; }
.ly-flexc-sb { @extend .ly-flexc-y; justify-content: space-between; }
.ly-flexc-sa { @extend .ly-flexc-y; justify-content: space-around; }
.ly-flex-newline { flex-wrap: wrap; }
.ly-vihide { visibility: hidden; }
.ly-scroll { -webkit-overflow-scrolling : touch; }
.ly-disable-touch { touch-action: none; }
.ly-fixed-top {
  &,.fixed-box { height: $header_h; }
  .fixed-box { @include shadow(2px); @include padding_lr($divide_s); @extend .ly-flexc-sb,.ly-box; position: fixed; top: 0; left: 0; width: 100%; background: $bg_color_fixed; }
  .fixed-btn { @include padding_lr($divide_s); @extend .ly-flex1; }
}
.ly-fixed-bottom {
  &,.fixed-box { height: $footer_h; }
  .fixed-box { @include shadow(-2px); @include padding_lr($divide_s); @extend .ly-flexc-sb,.ly-box; position: fixed; bottom: 0; left: 0; width: 100%; background: $bg_color_fixed; }
  .fixed-btn { @include padding_lr($divide_s); @extend .ly-flex1; }
}
.ly-content { margin: 0 auto; width: $view_min_width; height: auto; }

.img-auto { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.img-w100 { width: 100%; height: auto; max-height: 100%; }
.img-h100 { width: auto; height: 100%; max-width: 100%; }
.img-mw100 { width: auto; max-width: 100%; }
.img-mh100 { height: auto; max-height: 100%; }

.txt-blod { font-weight: bold; }
.txt-normal { font-weight: normal; }
.txt-light { font-weight: lighter; }
.txt-l { text-align: left; }
.txt-c { text-align: center; }
.txt-r { text-align: right; }
.txt-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.txt-mellipsis { @include multiLine_ellipsis(2); }
.txt-nowrap { white-space: nowrap; }
.txt-newline { white-space: pre-wrap; word-wrap: normal; word-break: break-all; }

.clearfix { @include css_clearfix; }

@each $key, $val in $color_tips_map {
  .tip-#{$key} { color: $val; }
}

@each $key, $val in $color_char_map {
  .char-#{$key} { color: $val; }
}

@each $key, $val in $fs_map {
  .fs-#{$key} { font-size: $val; }
}
